<template>
  <div class="main-container">
    <el-form inline>
      <el-form-item>
        <h2>设备工时分项报表</h2>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="searchMonth" type="month" value-format="yyyy-MM-dd" placeholder="请选择月份"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table border stripe :data="summaryList" :summary-method="calcSummaries" show-summary>
      <el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
      <el-table-column prop="equipment" label="设备" align="center" min-width="100"></el-table-column>
      <el-table-column prop="planHour" label="应动工时" align="center" min-width="100"></el-table-column>
      <el-table-column prop="workHour" label="实动工时" align="center" min-width="100"></el-table-column>
      <el-table-column prop="workRate" label="设备开动率" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ (scope.row.workRate * 100).toFixed(0) }} %</span>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <div ref="echarts1" style="width: 100%; height: 600px"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { getEquipmentReportApi } from '@/api/report/api_report_work_hour'
import dayjs from 'dayjs'
import * as echarts from 'echarts'

@Component({
  components: {}
})
export default class EquipmentSummary extends Vue {
  private chart1!: echarts.ECharts
  searchMonth: any = ''
  summaryList: any = []

  created() {
    this.initSearchMonth()
    this.query()
  }

  private initSearchMonth() {
    // 判断路由来源
    const from = this.$route.params.from
    if (from == 'production_summary') {
      const month = this.$route.params.month
      this.searchMonth = dayjs(new Date(month)).format('YYYY-MM-DD')
    } else {
      this.searchMonth = dayjs(new Date()).format('YYYY-MM-DD')
    }
  }
  initChart() {
    const chartDom1 = this.$refs.echarts1 as HTMLDivElement
    this.chart1 = echarts.init(chartDom1)

    const x = this.summaryList.map(item => item.equipment)
    const y1 = this.summaryList.map(item => item.planHour)
    const y2 = this.summaryList.map(item => item.workHour)
    const y3 = this.summaryList.map(item => item.workRate)

    const option1 = {
      title: {
        text: '设备开动率'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['应动工时', '实动工时', '设备开动率']
      },

      grid: {
        bottom: '25%'
      },
      xAxis: {
        type: 'category',
        data: x,
        axisLabel: {
          rotate: -30
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '工时',
          axisLabel: {
            formatter: '{value} H'
          }
        },
        {
          type: 'value',
          name: '设备开动率',
          axisLabel: {
            formatter: '{value}'
          }
        }
      ],
      series: [
        {
          name: '定额工时',
          type: 'bar',
          data: y1
        },
        {
          name: '实动工时',
          type: 'bar',
          data: y2
        },
        {
          name: '设备开动率',
          type: 'line',
          yAxisIndex: 1,
          data: y3
        }
      ]
    }

    this.chart1.setOption(option1)
  }
  async query() {
    // 根据选中月份
    console.log('选中月份')
    console.log(this.searchMonth)
    await getEquipmentReportApi({ month: this.searchMonth })
      .then(res => (this.summaryList = res.data))
      .then(() => this.initChart())
  }

  /**
   * 计算表尾行
   * 合计 定额工时与实动工时
   * 平均 定额完成率与设备开动率
   */
  calcSummaries(params) {
    const { columns, data } = params
    const sums: any = []
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = '合计'
        return
      }
      const values = data.map(item => Number(item[column.property]))
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)
        if (index === 3) {
          sums[index] = sums[index].toFixed(2)
        }
        if (index === 4) {
          sums[index] = ((sums[index] / data.length) * 100).toFixed(0) + '%'
        }
      } else {
        sums[index] = ' '
      }
    })

    return sums
  }
}
</script>

<style></style>
